<!DOCTYPE html>
<html>
<head>
<title>待查款订单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/css/my.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/static/layer/layer/layer.js"></script>
<style>
        #top,#bottom{
            height: 50px;
            width: 100%; 
            line-height: 50px;
            position: fixed;
            background-color: #f7f7f7;
            z-index: 20;
            opacity: 1;
        }
        #top{border-bottom: 1px solid #ccc;top: 0;}
</style>
</head>
<body >
<div class="container-fluid">
    <div id="top" class="row" class="text-center">
        <div class="col text-left h3">待查款订单</div>
        <div class="col text-left"></div>
        <div class="col text"></div>
    </div>
    <div style="height:70px;"></div>
    <table class="table table-sm table-hover table-striped" style="width: max-content;min-width: 100%;">
        
        <thead class="table-info">
            <th>序号</th>
            <th>流水号</th>
            <th>订单类型</th>
            <th>客户编号</th>
            <th>客户名</th>
            <th>发货地</th>
            <th>目的地</th>
            <th>距离</th>
            <th>货车类型</th>
            <th>价格</th>
            <th>付款方式</th>
            <th>付款截屏</th>
            <th>状态</th>
            <th>

            </th>
        </thead>
        <tbody>
            {foreach $list['data'] as $k=>$kv}
            <tr>
                <td>{$k+1}</td>
                <td>{$kv['order_no']}</td>
                <td>{$kv['type_name']}</td>
                <td>{$kv['creater']}</td>
                <td>{$kv['creater_name']}</td>
                <td>{$kv['address1']}</td>
                <td>{$kv['address2']}</td>
                <td>{$kv['distance']}</td>
                <td>{$kv['truck_type']}</td>
                <td>{$kv['price1']}</td>
                <td>{$kv['payment']}</td>
                <td>{$kv['pay_img']}</td>
                <td>{$kv['status_name']}</td>
                <td class="text-nowrap">

                    <button tyle="button" class="btn btn-sm btn-info">
                        <span class="bi-card-list" oid="{$kv['id']}"></span>
                    </button>
                    <button tyle="button" class="btn btn-sm btn-info" >
                        <span class="bi-info" oid="{$kv['id']}"></span>
                    </button>                    
                    {if $kv['status']==2}
                        <button tyle="button" class="btn btn-sm btn-warning cancel" oid="{$kv['id']}">
                            <span class="bi-trash" ></span>
                        </button>

                        <button type="button" class="btn btn-sm btn-success check"  oid="{$kv['id']}" >
                            <span class="bi-check">确认</span>
                        </button>
                    {/if}


              
                </td>
            </tr>
            {/foreach}

        </tbody>    
    </table>
    {include file="common/pagination"}
</div>

</body>

<script type="text/javascript">
  
  $(document).ready(function(){
    setTimeout(function(){$(".query").show()},3000);

    $(".bi-card-list").on('click',function(){
        var oid =$(this).attr('oid');
        layer.open({
          type: 2,
          title: '订单明细',
          shadeClose: true,
          shade: false,
          maxmin: true, //开启最大化最小化按钮
          area: ['500px', '600px'],
          content: '/index.php/order/order_list/id/'+oid
        });
    })

    $(".bi-info").on('click',function(){
        var oid =$(this).attr('oid');
        layer.open({
          type: 2,
          title: '订单记录',
          shadeClose: true,
          shade: false,
          maxmin: true, //开启最大化最小化按钮
          area: ['700px', '600px'],
          content: '/index.php/order/order_log/id/'+oid
        });
    })

    $(".cancel").on('click',function(){
        var el_ord = $(this).parents('tr');
        var oid=$(this).attr('oid');
        layer.confirm('是否取消此订单？', {
          btn: ['是的','再看一下'] //按钮
        }, function(){
           $.post('/index.php/order/order_cancel',{id:oid},function(res){
                layer.msg(res.msg);
                if(res.code){
                    el_ord.remove();
                }
           });
        }, function(){
            layer.msg('取消操作!');
        });
    })

    $(".check").on('click',function(){
        var oid=$(this).attr('oid');

        layer.confirm('是否确认此订单已付款成功！', {
          btn: ['确认已付款','再看一下'] //按钮
        }, function(){
           $.post('/index.php/order/order_check',{id:oid,status:3},function(res){
                layer.msg(res.msg);
                if(res.code){
                    window.location.reload();
                }
           });           
        }, function(){
            layer.msg('操作取消!');
        });
    })    


     
  })



</script>

</body>
</html>
